<template>
  <div id="app">
    <header>
      <h1>Teaching Animation System</h1>
    </header>
    
    <nav class="main-nav">
      <button 
        :class="{ active: activeTab === 'projects' }"
        @click="activeTab = 'projects'"
      >
        Projects
      </button>
      <button 
        :class="{ active: activeTab === 'timeline' }"
        @click="activeTab = 'timeline'"
        :disabled="!currentProjectId"
      >
        Timeline Editor
      </button>
      <button 
        :class="{ active: activeTab === 'preview' }"
        @click="activeTab = 'preview'"
        :disabled="!currentProjectId"
      >
        Real-time Preview
      </button>
      <button 
        :class="{ active: activeTab === 'assets' }"
        @click="activeTab = 'assets'"
        :disabled="!currentProjectId"
      >
        Asset Manager
      </button>
    </nav>
    
    <main>
      <div v-if="activeTab === 'projects'" class="tab-content">
        <ProjectManager @load-timeline="handleLoadTimeline" />
      </div>
      
      <div v-else-if="activeTab === 'timeline'" class="tab-content">
        <TimelineEditor :project-id="currentProjectId" />
      </div>
      
      <div v-else-if="activeTab === 'preview'" class="tab-content">
        <RealtimePreview :project-id="currentProjectId" />
      </div>
      
      <div v-else-if="activeTab === 'assets'" class="tab-content">
        <AssetManager :project-id="currentProjectId" />
      </div>
    </main>
  </div>
</template>

<script>
import ProjectManager from './components/project-manager/ProjectManager.vue';
import TimelineEditor from './components/timeline-editor/TimelineEditor.vue';
import RealtimePreview from './components/realtime-preview/RealtimePreview.vue';
import AssetManager from './components/asset-manager/AssetManager.vue';

export default {
  name: 'App',
  components: {
    ProjectManager,
    TimelineEditor,
    RealtimePreview,
    AssetManager
  },
  data() {
    return {
      activeTab: 'projects',
      currentProjectId: null
    };
  },
  methods: {
    handleLoadTimeline(projectId) {
      this.currentProjectId = projectId;
      this.activeTab = 'timeline';
    }
  }
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 30px;
}

header h1 {
  color: #333;
  margin-bottom: 10px;
}

.main-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.main-nav button {
  padding: 10px 20px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.main-nav button:hover {
  background-color: #e9ecef;
}

.main-nav button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.tab-content {
  min-height: 500px;
}
</style>